<template>
    <div class="fodder-box" v-for="res in materialList" :key="res.id" @click="clickMaterial(res)">
        <CheckCircleFilled
            v-if="props.batch"
            class="batchSelect"
            :style="{color: res.batchSelect ? '#3070ff' : '#999'}"
        />
        <div class="set-shade" v-if="props.batch"></div>
        <div class="fodder-suspend" v-show="!props.batch">
            <a-tooltip v-for="it in res.functionList" :title="it.name">
                <div @click="clickFunction(res, it)">
                    <RetweetOutlined v-if="it.genre === 'send'" />
                    <FormOutlined v-if="it.genre === 'edit'" />
                    <CopyOutlined v-if="it.genre === 'copy'" />
                    <LoginOutlined v-if="it.genre === 'merge'" />
                    <DeleteOutlined v-if="it.genre === 'danger'" />
                </div>
            </a-tooltip>
        </div>
        <div class="fodder-title">
            <span class="fodder-text">{{ res.name }}</span>
            <div style="color: rgb(255, 105, 0)" @click="() => onCollect(res)">
                <a-tooltip :title="res.prompt">
                    <HeartOutlined v-if="res.clean" />
                    <HeartFilled v-else />
                </a-tooltip>
            </div>
        </div>
        <div class="fodder-time">{{ res.time }}</div>
        <div class="fodder-file"><Details :details="res.content" quantity="sole" /></div>
        <div class="fodder-label">
            <span>标签；{{ res.label }}</span>
            <span>共{{ res.amount }}条</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, defineEmits} from "vue";
import {
    RetweetOutlined,
    FormOutlined,
    CopyOutlined,
    LoginOutlined,
    DeleteOutlined,
    HeartOutlined,
    HeartFilled,
    CheckCircleFilled,
} from "@ant-design/icons-vue";
import Details from "@/components/Document/Details.vue";

// 子组件
const props = defineProps<{
    materialList: Array<{
        name: string;
        time: string;
        clean: boolean;
        batchSelect: boolean;
        prompt: string;
        label: string;
        amount: number;
        id: number;
        type: string;
        content: {
            img: string;
            type: string;
            title: string;
            subheading: string;
        }[];
        functionList: {
            name: string;
            genre: string;
        }[];
    }>;
    batch: boolean;
}>();

const {materialList, batch} = props;

//点击清除
const emit = defineEmits(["collect", "clickFunction", "clickMaterial"]); // 声明 'collect' 事件
const onCollect = res => {
    emit("collect", res); // 触发事件，传递res
};
//点击编辑，群发等
const clickFunction = (res, it) => {
    emit("clickFunction", {res, it});
};

//点击素材
const clickMaterial = res => {
    emit("clickMaterial", res);
};
</script>

<style scoped lang="less">
.fodder-box {
    width: 32.5%;
    min-width: 250px;
    max-width: 400px;
    border: 1px solid #e9e9e9;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    height: 221px;
    .set-shade {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 0;
        left: 0;
    }
    .batchSelect {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 20px;
        z-index: 2;
    }
    .fodder-suspend {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        height: 32px;
        border-radius: 4px;
        padding: 12px 0;
        margin: 0 12px;
        background: #3070ff;
        color: #fff;
        justify-content: space-around;
        align-items: center;
        display: none;
        .anticon {
            font-size: 15px;
        }
    }
    .fodder-title {
        font-size: 14px;
        display: flex;
        .fodder-text {
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            margin-right: 10px;
        }
    }
    .fodder-time {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
    }
    .fodder-file {
        margin-top: 8px;
        background: #f9f9f9;
        padding: 0 8px;
        border-radius: 3px;
        height: 120px;
        display: flex;
        align-items: center;
    }
    .fodder-label {
        color: #888999;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        span {
            max-width: 200px;
            word-break: break-all;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
.fodder-box:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(47, 84, 235, 0.85);
    .fodder-suspend {
        display: flex;
    }
}
</style>
